<!-- subpkg_consult/order_list/index.vue -->
<script setup>
  import { ref } from 'vue'

  // 订单列表组件
  import OrderList from './components/order-list.vue'

  // 标签索引值
  const tabIndex = ref(0)
  // 标签页数据
  const orderTabs = ref([
    { label: '问医生', type: 1, rendered: true },
    { label: '极速问诊', type: 2, rendered: false },
    { label: '开药问诊', type: 3, rendered: false },
  ])

  const onTabClick = (data) => {
    tabIndex.value = data.index
    // 点了谁，就把谁标记为已渲染
    orderTabs.value[data.index].rendered = true
  }
</script>
<template>
  <view class="consult-page">
    <view class="consult-status-tabs">
      <custom-tabs @click="onTabClick" :list="orderTabs"></custom-tabs>
    </view>

    <!-- 订单列表 -->

    <view v-for="(v, i) of orderTabs" :key="v.type" v-show="tabIndex === i">
      <order-list v-if="v.rendered" :type="v.type" />
    </view>
  </view>
</template>

<style lang="scss">
  // subpkg_consult/order_list/index.scss
  .consult-page {
    background-color: #f6f6f6;
  }

  .consult-status-tabs {
    padding: 20rpx 30rpx 0;
    background-color: #fff;

    :deep(.custom-tabs) {
      justify-content: space-evenly;
    }
  }
</style>
